<template>
  <div style="min-height: 100%;width: 100%;">
    <!--    数据模板-->
    <div v-if="!showPage">
      <div style="margin-left: 10px;margin-bottom: 10px">
        <el-select v-if="$permiss[468]" style="width:200px" :placeholder="$t('请选择租户')" v-model="adminUserId" clearable
                   @change="tenantChange">
          <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                     :value="item.adminUserId"></el-option>
        </el-select>
        <span v-if="$permiss[468]" style="padding: 0 10px;text-align: center;line-height: 32px">-</span>
        <el-select style="width:200px" :placeholder="$t('请选择APP')" clearable v-model="productName"
                   @change="productChange">
          <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                     :value="item.productName"></el-option>
        </el-select>
      </div>
      <div>
        <!--      今日数据统计-->
        <div v-if="$permiss[409]">
          <div class="statistics">
          <span class="title">
            {{ $t('今日数据') }}
          </span>
            <i style="color: #BEBEBE ;font-size: 22px" @click="refreshData"
               class="el-icon-refresh cursor_pointer"
               :class="{'refresh_rotate' : refresh_flag}"></i>
          </div>
          <StatisticsData ref="statisticsDataRef" :params="pageParams"/>
        </div>
        <el-row :gutter="24" style="margin: 15px 0 0 0">
          <el-col :span="12" :xs="24" v-if="$permiss[411]">
            <el-card shadow="never">
              <template slot="header">
                <span>{{ $t('今日各类订单结清率总览') }}</span>
                <i style="color: #BEBEBE ;font-size: 22px;float: right"
                   :class="{'refresh_rotate':reminderOver_flag}"
                   @click="reminderOverChange"
                   class="el-icon-refresh cursor_pointer"></i>
              </template>
              <Table border
                     :table-column="reminderTableColumn" :table-data="reminderOverview"
                     :page="false"
                     height="100"
                     :header-style="{backgroundColor:'#fffbed'}"/>
            </el-card>
          </el-col>
          <el-col :span="12" :xs="24" v-if="$permiss[415]">
            <el-card shadow="never">
              <template slot="header">
                <span> {{ $t('今日各催收客群回款率总览') }}</span>
                <i style="color: #BEBEBE ;font-size: 22px;float: right"
                   :class="{'refresh_rotate':collection_flag}"
                   @click="collectionChange"
                   class="el-icon-refresh cursor_pointer"></i>
              </template>
              <Table border
                     height="100"
                     :table-column="collectionListTableColumn"
                     :table-data="overdueCollection" :page="false"
                     :header-style="{backgroundColor:'#fffbed'}"/>
            </el-card>
          </el-col>
        </el-row>
        <!--      数据趋势-->
        <div style="margin: 10px 0" v-if="$permiss[412]">
          <div class="data_trends">
            <div>
              <span class="title">  {{ $t('数据趋势') }}</span>
              <span style="font-size: 16px;color: #6f6e6e"> ({{ $t('默认近30天') }})</span>
            </div>
            <div>
              <el-date-picker
                  v-model="paymentTimeValue"
                  value-format="yyyy-MM-dd"
                  @change="paymentDateChange"
                  type="daterange"
                  range-separator="~"
                  :clearable="false"
                  unlink-panels
                  :start-placeholder="$t('开始日期')"
                  :end-placeholder="$t('结束日期')">
              </el-date-picker>
            </div>
          </div>
          <DataTrends :dataTrends="dataTrends"/>
        </div>
      </div>
    </div>
    <!--    信审首页-->
    <div v-else-if="$permiss[1473] || $permiss[1474]">
      <CreditReviewPage/>
    </div>
    <!--    提醒首页-->
    <div v-else-if="$permiss[1534] || $permiss[1525]">
      <RemindPage/>
    </div>
    <!--    催收首页-->
    <div v-else-if="$permiss[1667] || $permiss[1660]">
      <CollectionPage/>
    </div>
    <!--    欢迎页-->
    <div v-else class="welcome">
      <div class="center">
        <img class="img" src="../../assets/welcome.png"/>
        <p class="tips_lang">{{ $t('您好，欢迎使用云盾金融系统') }}</p>
      </div>
    </div>

  </div>
</template>

<script>
import {
  selectTenant,
  selectProduct,
  fetchHomeTrend,
  day3ExpireRemind,
  day3OverdueCollection,
} from "@/api/system";
import StatisticsData from './compoents/statisticsData'
import DataTrends from './compoents/dataTrends'
// 信审首页
import CreditReviewPage from './compoents/creditReviewPage/index';
// 提醒首页
import RemindPage from './compoents/remindPage/index'
// 催收首页
import CollectionPage from './compoents/collectionPage/index'
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";

export default {
  name: 'homePage',
  data() {
    return {
      consumptionInfo: {
        balance: 0,
        todayConsumer: 0,
        yesterdayConsumer: 0
      },
      timeValue: defaultTimeDate(1),
      tenantList: [],
      productList: [],
      adminUserId: null,
      productName: null,
      cumulativeTimeValue: defaultTimeDate(7),
      pageParams: {},
      reminderOverview: [],
      reminderTableColumn: [
        {label: this.$t('日期'), prop: 'time', align: 'center', minWidth: 100},
        {label: this.$t('订单到期结清率'), prop: 'orderD0Rate', align: 'center', minWidth: 150},
        {label: this.$t('订单提前一天结清率'), prop: 'orderS1Rate', align: 'center', minWidth: 150},
        {label: this.$t('订单提前二天结清率'), prop: 'orderS2Rate', align: 'center', minWidth: 150},
      ],
      overdueCollection: [],
      collectionListTableColumn: [],
      loading: false,
      paymentTimeValue: defaultTimeDate(30),
      dataTrends: [],
      refresh_flag: false,
      collection_flag: false,
      reminderOver_flag: false,
    }
  },
  mounted() {
    this.getSelect()
  },
  computed: {
    showPage() {
      const permiss = [415, 412, 411, 410, 409, 408, 468, 467, 1344, 1345, 1346, 1347].some(item => {
        return this.$permiss[item]
      })
      return !permiss
    },
  },
  methods: {
    productChange() {
      this.getData()
    },
    async getSelect() {
      // 有租户权限就显示租户列表 否则展示产品列表
      this.tenantList = await selectTenant().then(res => res.data)
      if (this.tenantList.length) {
        this.adminUserId = this.tenantList[0].adminUserId
      }
      this.productList = await selectProduct().then(res => res.data)
      this.getData()
    },
    getData() {
      this.$permiss[409] && this.getStatisticsData()
      this.$permiss[411] && this.getReminderOverview()
      this.$permiss[415] && this.getCollectioneOverview()
      this.$permiss[412] && this.getDataTrends()
    },
    async tenantChange(value) {
      this.adminUserId = value
      this.productName = null
      this.getData()
      if (value) {
        this.productList = await selectProduct({adminUserId: value}).then(res => res.data)
      } else {
        this.productList = []
      }
    },
    // 到期提醒总览刷新数据
    async reminderOverChange() {
      this.reminderOver_flag = true
      await this.getReminderOverview()
      this.reminderOver_flag = false
    },
    // 逾期催收总览刷新数据
    async collectionChange() {
      this.collection_flag = true
      await this.getCollectioneOverview()
      this.collection_flag = false
    },
    // 获取今日数据统计
    async getStatisticsData() {
      this.pageParams = {
        adminUserId: this.adminUserId,
        productName: this.productName ? this.productName : undefined,
      }
      this.$nextTick(() => {
        const {
          todayDataStatistics,
          todayOverdueData,
          todayNotSettleData,
          todayPayData,
          todayShouldData
        } = this.$refs.statisticsDataRef
        //  获取今日数据
        this.$permiss[409] && todayDataStatistics()
        //  未结清数据
        this.$permiss[1345] && todayNotSettleData()
        //  入催数据
        this.$permiss[1345] && todayOverdueData()
        //  打款数据
        this.$permiss[1344] && todayPayData()
        //  应还数据
        this.$permiss[1346] && todayShouldData()
      })
    },
    // 获取到期提醒总览
    async getReminderOverview() {
      const res = await day3ExpireRemind({
        productName: this.productName,
        adminUserId: this.adminUserId
      })
      if (res.code === 1) {
        this.reminderOverview = [res.data]
      }
    },
    // 获取逾期催收总览
    async getCollectioneOverview() {
      const res = await day3OverdueCollection({
        productName: this.productName,
        adminUserId: this.adminUserId
      })
      if (res.code === 1 && res.data.length !== 0) {
        const data = res.data
        const collectionListTableColumn = [
          {label: this.$t('日期'), prop: 'time', align: 'center', minWidth: 100},
        ]
        data.forEach(item => {
          collectionListTableColumn.push({
            label: item.guestGroupName + this.$t('回款率'), prop: item.guestGroupName, align: 'center', minWidth: 150
          })
        })
        const obj = {
          time: res.data[0].time
        }
        res.data.forEach(item => {
          obj[item.guestGroupName] = item.toDays || ''
        })
        this.collectionListTableColumn = collectionListTableColumn
        this.overdueCollection = [obj]
      }
    },
    // 获取数据趋势数量
    async getDataTrends() {
      const [datetimeStart, datetimeEnd] = dateFormatSection(this.paymentTimeValue || [])
      const res = await fetchHomeTrend({
        productName: this.productName,
        adminUserId: this.adminUserId,
        datetimeStart, datetimeEnd
      })
      if (res.code === 1) {
        this.dataTrends = res.data
      }
    },
    async refreshData() {
      if (this.refresh_flag) return
      this.refresh_flag = true
      const p1 = this.getStatisticsData()
      const p2 = this.getReminderOverview()
      const p3 = this.getCollectioneOverview()
      const p4 = this.getDataTrends()
      Promise.all([p1, p2, p3, p4]).then(() => {
        this.refresh_flag = false
      })
    },
    // 数据趋势筛选
    paymentDateChange() {
      this.getDataTrends()
    }
  },
  components: {
    StatisticsData,
    DataTrends,
    CreditReviewPage,
    RemindPage,
    CollectionPage
  },
}
</script>

<style lang="less" scoped>


::v-deep .el-card__header {
  padding: 10px;
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

.refresh_rotate {
  -webkit-animation: rotate 1s linear infinite;
}

.welcome {
  min-width: 100%;
  min-height: 100%;

  .img {
    width: 100%;
    height: 100%;
  }

  .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.tips_lang {
  width: 100%;
  font-family: PingFang-SC-Regular;
  font-size: 28px;
  font-stretch: normal;
  letter-spacing: 2px;
  color: #3c3c3c;
  text-align: center;
}

.consumption_text {
  color: #ffffff;
  padding: 30px 0 0 15px;

  span {
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 3px;
    font-size: 16px;
  }
}

.amount {
  padding: 35px 0 0 15px;
  color: #ffffff;
  font-size: 36px;
  font-weight: bold;
  font-family: Microsoft YaHei;
}


.statistics {
  padding: 0 10px;
  margin-bottom: 10px;
}

.title {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #2B2B2B;
  margin-bottom: 10px;
  line-height: 38px;
}

.title_active {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #FF8D00;
}

.data_trends {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
</style>
